$primary = #1446a2
a {
  text-decoration: none;
}

#app.fixed
  width: 100%;
  height: 100%;
  overflow: auto;
  position: fixed;
.sidebar
  top: 60px;
  position: relative;
  height: calc(100% - 60px)
  overflow: auto;
  &.wide
    width: 180px;
  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color:transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: alpha($gray, 0.3);
  }

.code-wrapper {
  background: #282a36;
  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color:transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: alpha($gray, 0.3);
  }
}


.head-title
  font-weight: 400
  padding-bottom: 10px

.container-view
  position: fixed
  top: 0;
  left: 0;
  margin-left: 64px;
  width: calc(100% - 64px)
  height: 100%;
  background: #fff;
  &.wide
    width: calc(100% - 180px)
    margin-left: 180px;

.padding-block
  padding: 10px;

.grid-stack
  min-height: 300px
  > .grid-stack-item
    &:hover
      z-index: 10000
    > .grid-stack-item-content
      background: #fff;
      border: 1px solid #eaeefb
      overflow: visible;
      padding-top: 36px;
      transition: .2s;
      &:hover
        box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5)

.grid-stack-item-title
  padding: 0 12px;
  line-height: 36px;
  height: 36px;
  font-size: 14px;
  border-bottom: 1px solid #eaeefb
  background: #eaeefb + 80%
  position: absolute
  top: 0;
  left: 0;
  width: 100%;
  cursor: move;
  .grid-stack-static &
    cursor: default;
  .btn-icon
    font-size: 16px;
    line-height: 36px;
    cursor: pointer
    &:hover
      color: #0099ff;
.grid-stack-item-container
  position: absolute
  width: 100%;
  height: calc(100% - 36px);
  // overflow: hidden;

.grid-drag-overlay-fix
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  opacity: 0;
  display: block;

.absolute-height
  width: 100%;
  height: 100%;

.absolute-position
  position: absolute

.vue-colorpicker
  height: 32px!important;
  padding: 4px!important;

.vertical-align-center
  position: absolute;
  top: 40%;
  width: 100%;
.text-light
  color: $silverLight
.form-group.horizontal
  > .form-label
    width: 120px;
    float: left;
    + .form-content
      margin-left: 120px;
  .form-label.fat
    line-height: 40px;

.inline-block {
  display: inline-block;
}

.panel {
  background: #FFFFFF;
  box-shadow: 0 2px 16px 0 alpha($gray, .4)
  border-radius: 2px;
  border: 1px solid $light;
  margin: 10px 0;
  &:last-child {
    margin-bottom: 0;
  }
  .panel-header {
    border-bottom: 1px solid $light
    height: 45px;
    width: 100%;
    line-height: 25px;
    padding: 10px 15px;
    position: relative
    font-size: 15px;
    color: $dark;
    .panel-action {
      position: absolute;
      top: 6px;
      right: 10px;
      > i {
        line-height: 32px;
      }
    }
  }
  .panel-content {
    // min-height: 500px;
    padding: 10px 15px;
    overflow: auto
  }
}
.bread-crumb {
  margin-bottom: 20px;
}

hr.ml-hr {
  border: 0;
  border-bottom: 1px solid $light
  margin: 30px 0;
}

.line-wrap {
  display: block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ml-label-container.horizontal label.ml-label-text {
  margin-bottom 0
}

.pre-wrap {
  white-space pre-wrap;
}

.ml-devider {
  display inline-block;
  position: relative;
  line-height: 1;
  height: 32px;
  vertical-align: top;
  padding: 0 15px;
  &:before {
    display: block;
    content: '';
    width: 0;
    height: 100%;
    border-right: 1px solid $light;
    left: 10px;
  }
}

.logo {
  background-color: $primary;
  color: #fff;
  font-size: 18px;
  line-height: 52px;
  text-align: center;
  height: 52px;
  img.logo-img {
    width: 113px;
    .collapse& {
      width: 41px;
    }
  }
}

.navigation {
  width: 100%;
  height: 52px;
  position: fixed;
  top: 0;
  z-index: 101;
  background-color: $primary;
  color: $light;
  width: calc(100% - 200px)
  .collapsed & {
    width: calc(100% - 64px)
  }
  .navigator {
    display: inline-block;
    padding: 10px 25px;
    height: 52px;
    color: $light;
    line-height: 32px;
    cursor: pointer;
    vertical-align: top;
    &.user-avatar {
      padding: 5px 10px;
      .avatar {
        display: inline-block;
        width: 42px;
        height: 42px;
        position: relative;
        img.user-img {
          width: 36px;
          height: 36px;
          top: 3px;
          left: 3px;
          display: inline-block;
          position: absolute;
          border-radius: 50%;
        }
        svg.user-svg {
          width: 36px;
          height: 36px;
          top: 3px;
          left: 3px;
          display: block;
          position: absolute;
          border-radius: 50%;
          background: $success;
          text {
            text-anchor: middle;
            fill: $light;
            font-size: 45px;
          }
        }
        img.avatar-frame {
          top: 0;
          left: 0;
          position: absolute;
          width: 42px;
          height: 42px;
        }
      }
    }
    &.sidebar-toggler {
      color: $light;
      background: $primary - 30%;
      padding: 13px 10px;
      width: 54px;
      text-align: center;
      &:hover {
        background: $dark - 20%
      }
    }
    &.cursor-default {
      cursor: default
    }
    &.dropdown {
      padding: 0;
      border: 0;
    }
    + .navigator {
      margin-left: -1px;
    }
  }
  .dropdown {
    .dropdown-menu {
      li {
        border-bottom: 1px solid $primary;
        a.navigator {
          background: $primary;
          padding: 6px 25px;
          line-height: 28px;
          height: 40px;
          &:hover {
            background: $primary + 10%
          }
        }
      }
    }
    &.open > .navigator, &:hover {
      height: 51px;
      background: $primary + 10%;
      border-bottom: 1px solid $primary + 10%;
    }
  }
  .align-right {
    .navigator {
      + .navigator {
        margin-right: -1px;
        margin-left: 0;
      }
    }
  }
}
.dropdown-menu.fullscreen {
  width: 100%;
  height: 500px;
  position: fixed;
  top: 50px;
  padding: 0;
  margin-top: 0;
  background: $primary + 20%;
  box-shadow: none;
}